<!DOCTYPE html>
<html>
    <head>
        <title>1</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 
            事件的基本使用：
            1.使用v-on:xxx或@xxx绑定事件，其中xxx是事件名；
            2.事件的回调需要配置在methods对象中，最终会在vm上；
            3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
            4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象；
            5.@click="demo”和@click="demo（$event）”效果一致，但后者可以传参；
        -->
       <div id="root">
            <h1>text-{{name}}</h1>
            <button v-on:click="showInfo">点我提示1</button>
            <button @click="showInfo2(66,$event)">点我提示2</button>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false
            new Vue({
                el: '#root', 
                data(){
                    return {
                        name:'test'
                    }
                },
                methods:{
                    //不要用箭头函数
                    showInfo(event){
                        console.log(event)
                        console.log(this)
                        alert('提醒111')
                    },
                    showInfo2(id,event){
                        console.log(id)
                        console.log(event)
                        alert('22222')
                    },
                },
            })
        </script>
    </body>
</html>
